<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>音乐欣赏</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
    <h1>国贸联联看</h1>
    <nav>
        <ul>
            <li><a href="index.html">主页</a></li>
            <li><a href="class-intro.html">班级介绍</a></li>
            <li><a href="learning-garden.html">学习园地</a></li>
            <li><a href="class-news.html">班级新闻</a></li>
            <li><a href="class-album.html">班级相册</a></li>
            <li><a href="music-appreciation.html">音乐欣赏</a></li>
        </ul>
    </nav>
</header>
<main>
    <section>
        <h2>音乐欣赏</h2>
        <p>欢迎来到音乐欣赏页面！在这里您可以找到各种音乐资源，参与音乐活动，并分享您的音乐心得。</p>

        <!-- 音乐推荐 -->
        <article>
            <h3>本周音乐推荐</h3>
            <div class="music-recommendation">
                <img src="images/music_cover.jpg" alt="音乐封面" class="music-cover">
                <p><strong>歌曲名称：</strong>海阔天空</p>
                <p><strong>演唱者：</strong>Beyond乐队</p>
                <p><strong>推荐理由：</strong>这首歌曲传递了积极向上的情感，激励人们勇敢面对生活中的挑战。</p>
                <audio controls>
                    <source src="audios/sea_sky.mp3" type="audio/mpeg">
                    您的浏览器不支持 audio 元素。
                </audio>
            </div>
        </article>

        <!-- 音乐知识讲解 -->
        <article>
            <h3>音乐知识讲解</h3>
            <p>了解音乐的基本元素，如旋律、节奏、和声等，可以帮助我们更好地欣赏音乐。以下是一些基础音乐知识的介绍：</p>
            <ul>
                <li><strong>旋律：</strong>音乐中最容易被记住的部分，通常由一系列音符组成。</li>
                <li><strong>节奏：</strong>音乐的时间结构，决定了音符的长短和强弱。</li>
                <li><strong>和声：</strong>多个音符同时发声，创造出丰富的音响效果。</li>
            </ul>
        </article>

        <!-- 班级音乐活动 -->
        <article>
            <h3>班级音乐活动</h3>
            <p>我们班经常举办音乐活动，如合唱比赛、乐器演奏会等。以下是最近的一次活动记录：</p>
            <img src="images/class_concert.jpg" alt="班级音乐会" class="activity-image">
            <p>在上周五的班级音乐会上，同学们带来了精彩的表演，赢得了观众的阵阵掌声。</p>
        </article>

        <!-- 歌曲赏析链接 -->
        <article>
            <h3>歌曲赏析</h3>
            <p>深入了解经典歌曲背后的故事和创作背景：<a href="song-appreciation.html">进入歌曲赏析页面</a></p>
        </article>

        <!-- 用户互动 -->
        <article>
            <h3>分享您的音乐心得</h3>
            <p>您喜欢什么样的音乐？有什么特别的音乐故事要分享吗？请告诉我们！</p>
            <form action="#" method="post">
                <label for="feedback">分享您的音乐心得:</label><br>
                <textarea id="feedback" name="feedback" rows="4" cols="50"></textarea><br>
                <input type="submit" value="提交">
            </form>
        </article>
    </section>
</main>
<footer>
    <p>&copy; 2024 班级网站. All rights reserved.</p>
</footer>
</body>
</html>